<template>
  <div>
    <NewsHeader
      :tabIndex="tabIndex"
      :titleArr="titleArr"
      @toParent="handleTab"
    ></NewsHeader>

    <NewsContent :arr="arr" @removeClick="removeClick"></NewsContent>
  </div>
</template>

<script>
import { list } from './mock/index'
// 组件引用
import NewsHeader from './components/NewsHeader.vue'
import NewsContent from './components/NewsContent.vue'
export default {
  // 组件注册
  components: { NewsHeader, NewsContent },
  // data必须是函数
  data() {
    return {
      titleArr: [],
      arr: [],
      tabIndex: 0, // 全局下标
    }
  },
  created() {
    // 处理title数组
    list.forEach((item) => {
      this.titleArr.push(item.type)
    })
    // 初始化数据显示
    this.handleTab({ item: '首页', index: 0 })
  },
  methods: {
    // 监听子传递过来的数据
    handleTab({ item, index }) {
      console.log('父组件--->:', item, index)
      // 处理tabIndex
      this.tabIndex = index
      // 处理内容
      this.arr = list.filter((v) => v.type === item)
    },
    removeClick(index) {
      this.arr[this.tabIndex].children.splice(index, 1)
      console.log(index, 'index')
    },
  },
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-title {
  display: flex;
  position: sticky;
  left: 0;
  top: 0;
  background: #fff;
  li {
    margin: 5px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 10px;
    cursor: pointer;
  }
}
</style>
